<script setup lang="ts">
import { onMounted, ref } from 'vue'
import jsonp from "@utils/jsonp.ts";
import { useMainLogin } from '@/store/user'
import * as mars3d from "mars3d"
import icon from '@assets/image/ggtsg.png'
import gcoord from 'gcoord'
import { FigmaFlattenSelection } from '@icon-park/vue-next';

const user = useMainLogin()
const state = ref('')
const dataArr = ref()
const tipsArr = ref()
const searchflag = ref(true)
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(1)
const currentPage1 = ref(1)
const nextFlag = ref(true)

const querySearchAsync = () => {
  searchflag.value = true
  if(state.value!=''){
      jsonp({
        url:'https://restapi.amap.com/v5/place/text',
        param: {
          key: 'dbd97dedb114786e8c82c9fd37440658',
          keywords: state.value,
          region:user.basicInfo.cityCode,
          citylimit:false
        },
        success: (data:any)=>{
          if(data.pois.length!=0) {
            nextFlag.value=true
            data.pois.forEach(item => {
              item.value = item.name
            })
            tipsArr.value = data.pois
          }else {
            nextFlag.value=false
            pageNum.value--
          }
        }
      })
  }else{
    searchflag.value = false
    window.POISearch.clear()
  }
}

const handleSelect = (item: Record<string, any>) => {
  window.POISearch.clear()
  if(item.length>1) {
    item.forEach(arrItem=>{
      var result = gcoord.transform(
        arrItem.location.split(','),    // 经纬度坐标
          gcoord.GCJ02,               // 当前坐标系
          gcoord.WGS84,                // 目标坐标系
      )
      let billboard = new mars3d.graphic.BillboardEntity({
        id:arrItem.id,
        position:result,
        style:{
            image:icon,
            pixelSize: 10,
            color: "#05a5f1",
            label: {
              text: arrItem.name,
              pixelOffsetY: -40,
              color: '#fff',
              outline:true,
              outlineColor: "#000",
              outlineWidth:4,
              setHeight:5,
              scaleByDistance:true,
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0,2500)
            }
        },
        flyTo:true
      })
      billboard.addTo(window.POISearch)
    })
    dataArr.value = item
  }else {
    var result = gcoord.transform(
          item[0].location.split(','),    // 经纬度坐标
          gcoord.GCJ02,               // 当前坐标系
          gcoord.WGS84,                // 目标坐标系
      )
    let billboard = new mars3d.graphic.BillboardEntity({
        id:item[0].id,
        position:result,
        style:{
            image:icon,
            pixelSize: 10,
            color: "#05a5f1",
            label: {
              text: item[0].name,
              pixelOffsetY: -40,
              color: '#fff',
              outline:true,
              outlineColor: "#000",
              outlineWidth:4,
              setHeight:5,
              scaleByDistance:true,
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0,2500)
            }
        },
        flyTo:true
      })
      billboard.addTo(window.POISearch)
      dataArr.value = item
  }
}

const searchInfo = (pNum) => {
  pageNum.value = pNum
  searchflag.value = false
  jsonp({
    url:'https://restapi.amap.com/v5/place/text',
    param: {
      key: 'dbd97dedb114786e8c82c9fd37440658',
      keywords: state.value,
      region:user.basicInfo.cityCode,
      citylimit:false,
      page_size:pageSize.value,
      page_num:pNum,
    },
    success: (data:any)=>{
      if(data.pois.length!=0) {
        nextFlag.value=true
        data.pois.forEach(item => {
          item.value = item.name
        })
        handleSelect(data.pois)
      }else {
        nextFlag.value=false
        pageNum.value--
      }
    }
  })
}

const flyToPoint = (id) => {
  var graphic = window.POISearch.getGraphicById(id);
  graphic.flyTo({radius:300})
}

const getPoint = (item) => {
  searchflag.value = false
  tipsArr.value = []
  state.value = item.name
  handleSelect(item)
}

const handleCurrentChange = (val: string) => {
  if(val == 'prev') {
    pageNum.value--
  }else {
    pageNum.value++
  }
  searchInfo(pageNum.value)
}
</script>

<template>
  <div class="POISearchBox">
    <el-input v-model="state" placeholder="搜索 地点" @input="querySearchAsync" @change="searchInfo(1)" clearable />
    <div class="searchBtn" @click="searchInfo(1)"><i class="iconfont icon-sousuo"></i></div>
    <div class="infoBox" v-show="searchflag">
      <div class="tipsItem" v-for="item in tipsArr" :key="item.id" @click="getPoint(item)">
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    
    <div class="infoBox" v-show="!searchflag&&state">
      <div class="InfoItem" v-for="item in dataArr" :key="item.id" @click="flyToPoint(item.id)">
        <div class="name">{{ item.name }}</div>
        <div class="type">{{ item.type }}</div>
        <div class="rightIcon"><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 12L24 24L12 36" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M24 12L36 24L24 36" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>
      </div>
      <div style="display:flex;justify-content:space-between;color:#fff;text-align: center;">
          <el-button :disabled="pageNum==1" type="primary" text style="margin:10px 20px;" plain @click="handleCurrentChange('prev')">上一页</el-button>
          <el-button :disabled="!nextFlag" type="primary" text style="margin:10px 20px;" plain @click="handleCurrentChange('next')">下一页</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.POISearchBox {
  position:relative;
  display:flex;
  justify-content:space-between;
  margin-right:20px;
  width: 220px;
}
.searchBtn {
  display:flex;
  align-items:center;
  padding:0 10px;
  cursor:pointer;
  background:#3DBDA7;
  color:#fff;
  border-radius: 0 4px 4px 0;
}
.infoBox {
  width:100%;
  position:absolute;
  left:0;
  top:35px;
  background:rgba(29, 30, 34,.8);
}
.tipsItem {
  padding: 10px 20px;
  color:#fff;
  font-size:14px;
  cursor:pointer;
}
.InfoItem {
  position:relative;
  padding: 10px 20px;
}
.InfoItem:hover,
.tipsItem:hover {
  background: #555;
}
.InfoItem .name {
  font-size:16px;
  color:#fff;
}
.InfoItem .name,
.InfoItem .type {
  width:130px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.InfoItem .type {
  color:#aaa;
  font-size:12px;
}
.rightIcon {
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
}
</style>
<style>
.POISearchBox .el-input__wrapper {
  box-sizing: border-box;
  border-radius: 4px 0 0 4px;
  background: rgba(29, 30, 34,.8);
  box-shadow: 0 0 0 1px rgba(29, 30, 34,.8);
}
.POISearchBox .el-input__inner {
  color:#fff;
}
.POISearchBox .el-pagination {
  padding: 10px 20px;
  justify-content:space-between;
}
.POISearchBox .el-pagination__total  {
  color:#fff;
}
.POISearchBox .el-pagination button,
.POISearchBox .el-pager li {
  background:none !important;
  color:#fff !important;
}
</style>
